<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <div>
    <a-row :gutter="10" type='flex'>
      <a-col :md="5" :sm="24">
        <a-card :bordered="false">
          <DeviceOrgTree ref="devOrgTree" :expandedkeys="defaultExpand" @changeSelect="onSelectChange"
            @changeExpand="onExpandChange"></DeviceOrgTree>
        </a-card>
      </a-col>
      <a-col :md="19" :sm="24">
        <a-card :bordered="false">
          <div style="padding-left:5px; height: 100%; margin-top: 5px">
            <a-row class="dm-tabPanel">
              <a-button @click="btnIconClick" type="primary"
                :class="bIconShow == true ? 'dm-tabSelectButton' : 'dm-tabButton'"
                style="margin-right: 15px;">图标模式</a-button>
              <a-button @click="btnListClick" type="primary"
                :class="bListShow == true ? 'dm-tabSelectButton' : 'dm-tabButton'"
                style="margin-left: 15px;">列表模式</a-button>
            </a-row>
          </div>
          <DeviceSelectBox ref="devSelBox" v-show="bIconShow"></DeviceSelectBox>
          <TigDeviceList ref="tigDevList" v-show="bListShow"></TigDeviceList>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>

import DeviceSelectBox from './modules/DeviceSelectBox'
import TigDeviceList from './TigDeviceList'
import DeviceOrgTree from './modules/DeviceOrganizeTree'
import DeviceOrgTreeSysAdmin from './modules/DeviceOrganizeTreeSysAdmin'
import store from '@/store/'
import { setStore, getStore } from "@/utils/storage"


export default {
  name: 'DeviceMng',
  mixins: [],
  components: {
    DeviceSelectBox,
    TigDeviceList,
    DeviceOrgTree,
    DeviceOrgTreeSysAdmin
  },
  data() {
    return {
      selDevice: { id: 0 },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      orgCategoryDisabled: false,
      bListShow: false,
      bIconShow: true,
      timer: "",  //定时刷新页面数据定时器句柄
      refreshFps: 10000,//刷新间隔时间
      colHeight: "",
      userInfo: {},
      orgTree: {},
      defaultExpand: []
    }
  },

  computed: {

  },

  methods: {

    btnListClick() {
      this.bListShow = true;
      this.bIconShow = false;
    },
    btnIconClick() {
      this.bListShow = false;
      this.bIconShow = true;
    },
    dataRefresh() {
      //列表模式没有显示电压电流等竖直，所以不需要刷新
      if (this.bIconShow) {
        let data = {}
        let orgcode = this.$refs.devOrgTree.getSelectOrgCode();
        orgcode == undefined || orgcode == "" ? data.orgCode = this.userInfo.orgCode : data.orgCode = orgcode
        this.$refs.devSelBox.loadData(data,false);
      }

    },
    // setElementHeight() {
    //   this.$nextTick(() => {
    //     const height = this.$refs.rCard.$el.offsetHeight;
    //     this.colHeight = this.$refs.rCard.$el.offsetHeight + 'px';
    //     console.log("colHeight============================" + height);
    //   });
    // }
    onSelectChange(_data) {
      setStore('devicemgr_sel_orgcode', _data.orgCode)
      setStore('devicemgr_sel_orgId', _data.id)
      if (this.bIconShow)
        this.$refs.devSelBox.loadData(_data);
      else if (this.btnListClick)
        this.$refs.tigDevList.loadData(_data);
    },

    onExpandChange(_data) {
      //缓存展开
      setStore('devicemgr_sel_expand', _data)
    }
  },

  created() {
    this.timer = setInterval(this.dataRefresh, this.refreshFps);
    this.bIconShow = true
    this.bListShow = false
    this.userInfo = store.getters.userInfo
    this.defaultExpand = getStore('devicemgr_sel_expand') != undefined ? getStore('devicemgr_sel_expand') : [];
    this.$nextTick(() => {
      let saveOrgCode = getStore('devicemgr_sel_orgcode');
      let saveOrgId = getStore('devicemgr_sel_orgId');
      if (saveOrgCode != undefined && saveOrgCode != ""){
        let data ={orgCode:saveOrgCode,orgId:saveOrgId}
        this.onSelectChange(data)
        this.$refs.devOrgTree.setSelectOrgCode(data)
      }
      else {
        let data ={orgCode:this.$store.getters.userInfo.orgCode,orgId:this.$store.getters.userInfo.departIds}
        this.onSelectChange(data);
      }
    }
    )

  },

  mounted() {

  },

  beforeDestroy() {
    setStore('devicemgr_sel_orgcode',"")//避免切换用户时记录了其他机构
    setStore('devicemgr_sel_orgId',"")
    clearInterval(this.timer);
  },

  watch: {
    bListShow(val) {
      let data = {}
      data.orgCode = this.$refs.devOrgTree.getSelectOrgCode()
      this.$refs.tigDevList.loadData(data);
      //this.setElementHeight();
    },
    bIconShow(val) {
      let data = {}
      data.orgCode = this.$refs.devOrgTree.getSelectOrgCode()
      this.$refs.devSelBox.loadData(data);
      //this.setElementHeight();
    },
  }
}
</script>
<style scoped>
.dm-tabPanel {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #7074763b;
  box-shadow: 1px 1px rgb(219, 207, 207);
  height: 48px;
  width: 260px;
  border-radius: 40px;
  margin-bottom: 10px;
}

.dm-tabSelectButton {
  border-radius: 15px;
  height: 30px;
}

.dm-tabButton {
  background-color: #fff;
  border-color: #fff;
  color: black;
  text-shadow: none;
  box-shadow: none;
  font-weight: 300;
}
</style>